<template>
  <TopRow title="NFT" />

  <div v-if="isLogin != 'true'"><LogInTip /></div>

  <div class="nftList">
    <ul>
      <li
        @click="gotoAbout(item.Id)"
        v-for="(item, index) in nftList"
        :key="index"
      >
        <h2>
          <img :src="item.ImgURL" alt="" />
        </h2>
        <h3>{{ item.NftName }}</h3>
        <time>{{ item.Time }}</time>
        <div class="state">
          <p
            v-if="item.State == 1"
            :style="{ color: '#5D89E5', background: 'rgba(93, 137, 229, 0.2)' }"
          >
            铸造中
          </p>
          <p
            v-else-if="item.State == 0"
            :style="{ color: '#FA5151', background: 'rgba(250, 81, 81, 0.2)' }"
          >
            铸造失败
          </p>
          <p
            v-else
            :style="{ color: '#16C294', background: 'rgba(22, 194, 148, 0.2)' }"
          >
            铸造成功
          </p>
        </div>
      </li>
      <footer>
        <p v-if="nftList.length != 0">——已经到底了——</p>
        <p v-else :style="'margin-top:100px'">~空空如也~</p>
      </footer>
    </ul>
  </div>
  <BottomRow />
</template>

<script setup>
import TopRow from "../components/TopRow.vue";
import BottomRow from "../components/BottomRow.vue";
import LogInTip from "../components/LogInTip.vue";
import { ref } from "vue";
import axios from "axios";
import { useRouter } from "vue-router";
import { PathEnum } from "../assets/PathEnum.js";

const nftList = ref([]);
const isLogin = localStorage.isLogin;
if (isLogin == "true") {
  axios
    .get(PathEnum.releasePath.list, {
      params: { UserName: localStorage.loginUserName },
    })
    .then((res) => {
      console.log(res);
      nftList.value = res.data.NftList;
      for (var i = 0; i < nftList.value.length; i++) {
        nftList.value[i].Time = nftList.value[i].Time.split(" ")[0];
        // console.log(nftList.value[i].Time);
      }
    })
    .catch((err) => {
      console.log(err);
    });
}

const router = useRouter();

function gotoAbout(nftId) {
  router.push({
    path: "/About",
    query: { id: nftId },
  });
}
// axios({
//   url: "http://localhost:3001/nftList",
// }).then((res) => {
//   console.log(res);
//   nftList.value = res.data;
// });
</script>

<style scoped>
/* 列表整体 */
.nftList {
  display: flex;
  flex-direction: row;
  background: #f4f4f4;
  width: 390px;
  z-index: 0;
}

footer {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  padding: 100px 10px 10px;
  gap: 10px;

  width: 366px;
  height: 101px;
  left: 10px;
  top: 1110px;
}

footer p {
  width: 140px;
  height: 20px;

  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  /* identical to box height */

  text-align: center;

  color: #000000;

  mix-blend-mode: normal;
  opacity: 0.3;
}

/* 铸造状态 */
.state {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  flex-basis: content;
  box-sizing: border-box;
  width: 166px;
  height: 20px;
}

/* 铸造文字 */
.state p {
  width: 40px;
  height: 14px;
  left: 4px;
  top: 3px;
  padding-top: 2px;
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 400;
  font-size: 10px;
  line-height: 19px;
  /* identical to box height */
  text-align: center;
  color: #16c294;

  width: 60px;
  height: 20px;

  background: rgba(22, 194, 148, 0.2);
  border: 0.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 4px;
}

/* nft列表 */
.nftList ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 370px;
  left: 10px;
  right: 10px;
  top: 96px;
  position: absolute;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
}

/* 列表内条目，即nft */
.nftList ul li {
  display: flex;
  flex-direction: column;
  flex-basis: content;
  align-items: center;
  justify-content: space-between;

  height: 304px;
  width: 180px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  background: #ffffff;
  border-radius: 5px;
  overflow: auto;
}

/* 图片与信息 */
.nftList ul li > div {
  right: 0;
  top: 0;
}

/* 图片 */
.nftList ul li img {
  width: 180px;
  height: 180px;
  top: 0;
  padding: 0 auto;
  margin: 0 auto;
  background: #ffffff;
  object-fit: cover;
}

/* 时间 */
.nftList ul time {
  width: 166px;
  height: 23px;

  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  text-align: justify;

  color: #000000;

  mix-blend-mode: normal;
  opacity: 0.3;
}

/* nft名称 */
.nftList ul li h3 {
  width: 166px;
  height: 48px;

  top: 0;
  font-family: "PingFang SC";
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  line-height: 24px;

  color: rgba(0, 0, 0, 0.9);
}
</style>
